<template>
  <div class="userEdit">
    <!-- <Spin size="large" fix v-if="spinShow"></Spin> -->
    <div class="basicInfo">
      <Form :model="basicInfo" :label-width="100">
        <h3 class="title">基本信息</h3>
        <FormItem label="姓名" class="width30">
          <Input v-model="basicInfo.realname" disabled></Input>
        </FormItem>
        <FormItem label="手机号" class="width30">
          <Input v-model="basicInfo.phone" disabled></Input>
        </FormItem>
        <FormItem label="身份证号" class="width30">
          <Input v-model="basicInfo.idc" disabled></Input>
        </FormItem>
        <FormItem label="身份证照片" class="imgGroup">

          <div>
            <img :src="basicInfo.idcFrontImg" v-if="basicInfo.idcFrontImg" alt>
            <img src="../../../assets/front.png" alt="" v-else>
            <p>身份证正面照</p>
          </div>
          <div >
            <img :src="basicInfo.idcBacImg" alt v-if="basicInfo.idcBacImg">
            <img src="../../../assets/back.png" alt="" v-else>
            <p>身份证反面照</p>
          </div>
        </FormItem>
      </Form>
      <Form :model="otherInfo" :label-width="100">
        <h3 class="title">其他信息</h3>
        <FormItem label="居住地区" class="width30">
          <Input v-model="otherInfo.area" disabled></Input>
        </FormItem>
        <FormItem label="详细地址" class="width30">
          <Input v-model="otherInfo.address" disabled></Input>
        </FormItem>
        <FormItem label="单位名称" class="width30">
          <Input v-model="otherInfo.companyName" disabled></Input>
        </FormItem>
        <FormItem label="工作性质" class="width30">
          <Input v-model="otherInfo.workType" disabled></Input>
        </FormItem>
        <FormItem label="	单位地区" class="width30">
          <Input v-model="otherInfo.companyArea" disabled></Input>
        </FormItem>
        <FormItem label="单位详细地址" class="width30">
          <Input v-model="otherInfo.companyAddress" disabled></Input>
        </FormItem>
        <FormItem label="月薪" class="width30">
          <Input v-model="otherInfo.monthly" disabled></Input>
        </FormItem>
      </Form>
      <Form :model="linkman" :label-width="100">
        <h3 class="title">常用联系人：</h3>
        <FormItem label="姓名" class="width30">
          <Input v-model="linkman.contractName" disabled></Input>
        </FormItem>
        <FormItem label="关系" class="width30">
          <Input v-model="linkman.relation" disabled></Input>
        </FormItem>
        <FormItem label="手机号" class="width30">
          <Input v-model="linkman.contractMobile" disabled></Input>
        </FormItem>
        <FormItem label="姓名" class="width30">
          <Input v-model="linkman.contractNameOne" disabled></Input>
        </FormItem>
        <FormItem label="关系" class="width30">
          <Input v-model="linkman.relationOne" disabled></Input>
        </FormItem>
        <FormItem label="手机号" class="width30">
          <Input v-model="linkman.contractMobileOne" disabled></Input>
        </FormItem>
      </Form>
      <Form :model="bankCard" :label-width="100" class="form">
        <h3 class="title">绑定银行卡</h3>
        <FormItem label="银行卡名称" class="width30">
          <Input v-model="bankCard.bankName" disabled></Input>
        </FormItem>
        <FormItem label="银行卡卡号" class="width30">
          <Input v-model="bankCard.bankNum" disabled></Input>
        </FormItem>
        <FormItem label="预留手机号" class="width30">
          <Input v-model="bankCard.bankPhone" disabled></Input>
        </FormItem>
        <FormItem label="完成绑定时间" class="width30">
          <Input v-model="bankCard.createTime" disabled></Input>
        </FormItem>
      </Form>
      <div style="text-align: center;margin-top: 20px;" v-if="type=='cw'">

        <Button style="width:80px;" size="large" type="primary" @click="okcw">通过</Button>
        <Button style="width:80px;margin: 0 10px;" size="large" @click="back">取消</Button>
        <Button style="width:80px;" size="large" @click="cancelcw">拒绝</Button>
      </div>
      <div style="text-align: center;margin-top: 20px;" v-if="type=='rg'">
        <Button style="width:80px;" size="large" type="primary" @click="okrg">通过</Button>
        <Button style="width:80px;margin: 0 10px;" size="large" @click="back">取消</Button>
        <Button style="width:80px;" size="large" @click="modal=true">拒绝</Button>
      </div>
      <div style="text-align: center;margin-top: 20px;" v-if="!type">
        <Button style="width:80px;" size="large" type="primary" @click="back">返回</Button>
      </div>
    </div>

    <Modal
      v-model="modal"
      title="拒绝"
      width="500"
      :closable="true"
      :style="{textAlign:'left'}">
      <Form ref="formRole" :rules="ruleValidate" :model="form" :label-width="60" style="margin:20px 0">
        <FormItem label="原因" prop="content" >
          <Input v-model="form.content" type="textarea"  placeholder="请输入拒绝或通过原因" style="width:340px"></Input>
        </FormItem>

      </Form>
      <div style="margin-left: 350px;" >
        <Button type="primary" @click="cancelrg">确定</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tag: {
        title: "用户详情",
        path: "/work/user/userEdit"
      },
      url:'',
      basicInfo: {},
      otherInfo: {},
      linkman: {},
      bankCard: {},
      spinShow:false,
      type:'',
      url:'',
      modal:false,
      ruleValidate: {
        content: [
          { required: true, message: '请填写原因', trigger: 'blur' }

        ],
      },
      form:{},
      iid:'',
      id:''
    };
  },
  created(){
    this.type = this.$route.query.type;
    this.iid = this.$route.query.iid;

  },
  mounted() {
    this.getDetail();
    // this.$store.commit('changeTag', this.tag.path);
    // this.$store.commit('openPage', this.tag);
  },
  methods: {
    back() {
      switch (this.type) {
        case 'cw':
          this.url = '/work/callReview/list';
          break;
        case 'rg':
          this.url = '/work/audit/list';
          break;
        default :
          this.url = '/work/user/userList';
      }
      this.$router.push({path:this.url})
    },
    okcw () {
      this.$Modal.confirm({
        title: '提示',
        content: `<p>确认通过？</p>`,
        onOk: () => {
          this.$post('/bkfinancialloan/audit',{
            id:this.iid,
            reviewId:sessionStorage.getItem('adminid'),
            reviewStatus:1,//审核通过
            repaymentStatus:1
          }).then (res => {
            if(res.code == 0){
              this.$Message.success('审核成功');
              this.back();
            }
          }).catch(e => console.log(e))
        },
        onCancel: () => {
        }
      });

    },
    cancelcw () {
      this.$Modal.confirm({
        title: '提示',
        content: `<p>确认拒绝该用户？</p>`,
        onOk: () => {
          this.$post('/bkfinancialloan/audit',{
            id:this.iid,
            reviewId:sessionStorage.getItem('adminid'),
            reviewStatus:2,//审核拒绝
            repaymentStatus:1
          }).then (res => {
            if(res.code == 0){
              this.$Message.error('您已拒绝该用户');
              this.back();
            }
          }).catch(e => console.log(e))
        },
        onCancel: () => {
        }
      });
    },
    okrg () {
      console.log('rg')
      this.$Modal.confirm({
        title: '提示',
        content: `<p>确认通过？</p>`,
        onOk: () => {
          this.$post('/bkuserloan/manual/audit',{
            id:this.iid,
            reviewId:sessionStorage.getItem('adminid'),
            reviewStatus:1,
            status:1,
            remark:this.form.content
          }).then (res => {
            if(res.code == 0){
              this.$Message.success('审核成功');
              this.back();
            }
          }).catch(e => console.log(e))
        },
        onCancel: () => {
        }
      });
    },
    cancelrg () {
      this.$Modal.confirm({
        title: '提示',
        content: `<p>确认拒绝该用户？</p>`,
        onOk: () => {
          this.$post('/bkuserloan/manual/audit', {
            id: this.iid,
            reviewId:sessionStorage.getItem('adminid'),
            reviewStatus: 1,
            status: 2,
            remark: this.form.content
          }).then(res => {
            if (res.code == 0) {
              this.$Message.error('您已拒绝该用户');
              this.back();
            }
          }).catch(e => console.log(e))
        },
        onCancel: () => {
        }
      });
    },
    getDetail() {
      this.spinShow = true;
      this.$post("/user/customer/info", {
        id: this.$route.query.id
      })
        .then(res => {
          console.log(res.data, "detail");
          if (res.code == 0) {
            this.spinShow = false;
            const data = res.data;
            this.basicInfo.realname = data.realname; //基本信息
            this.basicInfo.phone = data.phone;
            this.basicInfo.idc = data.detailMap.userIdc.idc ? data.detailMap.userIdc.idc : "";
            this.basicInfo.idcFrontImg = data.detailMap.userIdc.idcFrontImg ? data.detailMap.userIdc.idcFrontImg : "";
            this.basicInfo.idcBacImg = data.detailMap.userIdc.idcBacImg ? data.detailMap.userIdc.idcBacImg : "";

            this.otherInfo = data.detailMap.userBasice; //其他信息
            this.otherInfo.workType = this.getType(this.otherInfo.workType,'work');

            this.linkman = data.detailMap.userBasice; //联系人
            this.linkman.relation = this.getType(this.linkman.relation,'relation');
            this.linkman.relationOne = this.getType(this.linkman.relationOne,'relation');

            this.bankCard = data.detailMap.userBankList[0] ? data.detailMap.userBankList[0] : {}; //银行卡
            this.bankCard.createTime = this.bankCard.createTime ? this.getLocalTime(this.bankCard.createTime) : '';
          }
          //  this.spinShow = false;
        })
        .catch(e => console.log(e));
    },
    getLocalTime(time) {//时间戳转日期
      const date = new Date(time);
      const year = date.getFullYear()
      const month = date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1
      const day = date.getDate() < 10 ? '0'+date.getDate() : date.getDate()
      const hour = date.getHours() < 10 ? '0'+date.getHours() : date.getHours()
      const minute = date.getMinutes() < 10 ? '0'+date.getMinutes(): date.getMinutes()
      const second = date.getSeconds() < 10 ? '0'+date.getSeconds(): date.getSeconds()
      const t1 = [year, month, day].join('-')
      const t2 = [hour, minute, second].join(':')
      return `${t1} ${t2}`
    },
    getType(num,type) {
    let obj = {};
    if(type == 'relation'){
      obj = { //联系人关系
        "1": "父母",
        "2": "配偶",
        "3": "兄弟",
        "4": "姐妹",
        "5": "朋友"
      }
    }else if(type == 'work'){//"打工", "个体户", "体制内工作", "老板", "无业"
      obj = { //公司性质
        "1": "打工",
        "2": "个体户",
        "3": "体制内工作",
        "4": "老板",
        "5": "无业",
      }
    }
    for (let key in obj) {
      if (key == num) {
        return obj[key];
        break;
      }
    }
  },
  }
};
</script>

<style scoped lang="less">
.userEdit {
  // position:relative;
  .title {
    margin-bottom: 15px;
    margin-left: 10px;
    border-left: solid 3px #20a0ff;
    padding-left: 15px;
    font-weight: bolder;
    font-size: 16px;
    color: #000;
  }

  .width40 {
    width: 40%;
    display: inline-block;
  }
  .width35 {
    width: 35%;
    display: inline-block;
  }
  .width30 {
    width: 30%;
    display: inline-block;
  }
  .width20 {
    width: 15%;
    display: inline-block;
  }
  .imgGroup {
    div {
      display: inline-block;
      margin-right: 30px;
      img {
        width: 150px;
        height: 100px;
      }
      p {
        text-align: center;
      }
    }
  }
}
/deep/ .ivu-modal-footer{
  display: none;
}
</style>
